<template>
	<view class="page px22">
		<!-- 导航栏 -->
		<!-- <uni-nav-bar backgroundColor="#F7F7F7" color="#222" left-icon="left" leftWidth="50rpx" :border="false"
			@clickLeft="back" statusBar title="农药使用记录" fixed></uni-nav-bar> -->
		<!-- 导航栏 -->

		<u--form :model="formData" ref="form" :rules="rules" errorType="toast">
			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="name">
					<u-form-item class="flex1" :labelWidth="190" label="地块名称" prop="name">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入地块名称" v-model="formData.name" />
					</u-form-item>
				</view>
			</view>
			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="dk_area">
					<u-form-item class="flex1" :labelWidth="190" label="地块面积" prop="dk_area">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入地块面积" v-model="formData.dk_area" />
					</u-form-item>
					<text>(亩)</text>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="nzu_name">
					<u-form-item class="flex1" :labelWidth="190" label="本季作物名称" prop="nzu_name">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入本季作物名称" v-model="formData.nzu_name" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view @click="open" :class="['flex', 'flex-between,px30', 'align-center']" :key="time">
					<u-form-item class="flex1" :labelWidth="190" label="日期">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请选择" disabled="" v-model="date" />
					</u-form-item>
					<image style="width: 15rpx; height: 27rpx" src="@/static/form/left.png" mode=""></image>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="ny_name">
					<u-form-item class="flex1" :labelWidth="190" label="农药名称" prop="ny_name">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入农药名称" v-model="formData.ny_name" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="fz_object">
					<u-form-item class="flex1" :labelWidth="190" label="防治对象" prop="fz_object">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入防治对象" v-model="formData.fz_object" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="mu_use">
					<u-form-item class="flex1" :labelWidth="190" label="每亩用量" prop="mu_use">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入每亩用量" v-model="formData.mu_use" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="multiple">
					<u-form-item class="flex1" :labelWidth="190" label="稀释倍数" prop="multiple">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入稀释倍数" v-model="formData.multiple" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="sy_method">
					<u-form-item class="flex1" :labelWidth="190" label="施用方法" prop="sy_method">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入施用方法" v-model="formData.sy_method" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="aq_time">
					<u-form-item class="flex1" :labelWidth="190" label="安全间隔期" prop="aq_time">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入安全间隔期" v-model="formData.aq_time" />
					</u-form-item>
				</view>
			</view>

			<view class="mt30 px30 bgWhite">
				<view class="flex flex-between align-center">
					<u-form-item label-position="top" label="备注" label-width="200" prop="remark">
						<u--textarea v-model="formData.remark" border="none" placeholder="请填写备注" height="100"></u--textarea>
					</u-form-item>
				</view>
			</view>
		</u--form>

		<view @click="submit" class="flex mt94 flex-center align-center br83 btnBg" :style="{ background: '#1F9A64', height: '90rpx' }">
			<text :style="{ color: '#fff' }">提交</text>
		</view>

		<uni-calendar ref="calendar" :insert="false" :end-date="endDate" @confirm="confirm" />
	</view>
</template>

<script>
import formMixin from "../../utils/formMixin"
export default {
	mixins: [formMixin],
	data() {
		return {
			log_type:2,
			formData: {
				name: "",
				dk_area: "",
				nzu_name: "",
				ny_name: "",
				fz_object: "",
				type: 3,
				mu_use: "",
				multiple: "",
				sy_method: "",
				aq_time: "",
				remark: "",
				time: "",
			},
			rules: {
				name: [
					{
						required: true,
						message: "请填写地块名称",
						trigger: ["blur", "change"],
					},
				],
				dk_area: [
					{
						required: true,
						message: "请填写地块面积",
						trigger: ["blur", "change"],
					},
				],
				nzu_name: [
					{
						required: true,
						message: "请填写本季作物名称",
						trigger: ["blur", "change"],
					},
				],
				ny_name: [
					{
						required: true,
						message: "请填写农药名称",
						trigger: ["blur", "change"],
					},
				],
				time: [
					{
						required: true,
						message: "请选择时间",
						trigger: ["blur", "change"],
					},
				],
			},
		}
	},
	computed: {
		endDate: {
			get() {
				const d = new Date()
				const year = d.getFullYear()
				let month = d.getMonth() + 1
				month = month < 10 ? `0${month}` : month
				const date = d.getDate()
				return `${year}-${month}-${date}`
			},
		},
		date: {
			get() {
				if (this.formData.time) {
					return uni.$u.timeFormat(this.formData.time, "yyyy-mm-dd")
				} else {
					return ""
				}
			},
			set(val) {
				this.formData.time = new Date(val).getTime() / 1000
			},
		},
	},
	onLoad(options) {
		if (options.id) {
			this.getFormData(options.id)
			this.$set(this.formData, "id", options.id)
		}
	},
	methods: {
		getFormData(id) {
			this.$http({
				url: "/Data/log_detail",
				data: {
					id: id,
					log_type: 2,
				},
				loading: true,
			}).then((res) => {
				for (let key in this.formData) {
					this.formData[key] = res.data[key]
					this.formData.type = 3
				}
			})
		},
		open() {
			this.$refs.calendar.open()
		},
		close() {
			this.$refs.calendar.close()
		},
		confirm(e) {
			this.date = e.fulldate
		},
		submit() {
			this.$refs.form
				.validate()
				.then((res) => {
					this.$http({
						url: "/Data/add_product_log",
						data: this.formData,
						loading: true,
					}).then((res) => {
						if (this.formData.id) {
							uni.showToast({
								title: "编辑成功",
								icon: "success",
								mask: true,
							})
						} else {
							uni.showToast({
								title: "添加成功",
								icon: "success",
								mask: true,
							})
						}
						setTimeout(() => {
							uni.navigateBack({})
						}, 1000)
					})
				})
				.catch((errors) => {})
			// this.$refs.form.validate((res) => {
			// 	console.log(res,'朋友同意同意同意')

			// })
		},
		back() {
			uni.navigateBack({})
		},
	},
}
</script>

<style lang="scss" scoped>
/deep/ .uni-navbar__header-container-inner {
	justify-content: left !important;
}

/deep/ .uni-nav-bar-text {
	font-size: 36rpx !important;
}

::v-deep .u-input {
	background-color: #fff !important;
}

::v-deep .u-form-item {
	flex: 1 !important;
}

::v-deep .u-form-item__body__left {
	height: 75rpx;
}

::v-deep .u-radio {
	margin-right: 22rpx;
}
</style>
